import { constants } from 'smooth-dnd'
import { defineComponent, h } from 'vue'

import { getTagProps, validateTagProp } from './utils'

// 导出一个名为SmoothDndDraggable的组件
export const SmoothDndDraggable = defineComponent({
  // 组件名称
  name: 'SmoothDndDraggable',
  // 组件的属性
  props: {
    // 标签属性，验证器为validateTagProp，默认值为'div'
    tag: {
      validator: validateTagProp,
      default: 'div'
    }
  },
  // 渲染函数
  render: function () {
    // 获取标签属性
    const tagProps = getTagProps(this, constants.wrapperClass)
    // 返回一个h函数，参数为标签属性和默认插槽
    return h(
      tagProps.value,
      Object.assign({}, tagProps.props),
      this.$slots?.default?.()
    )
  }
})
